<template>
   <header>
      <div class="l-content">
         <el-button @click="handleMenu" plain icon="el-icon-menu" size="mini"></el-button>
         <!-- <h3 style="color: #fff;">首页</h3> -->
         <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{{ item.label }}
            </el-breadcrumb-item>

         </el-breadcrumb>
      </div>
      <div class="r-content">
         <el-dropdown trigger="click" size="mini">
            <span>
               <img class="user" :src="userImg">
            </span>
            <el-dropdown-menu slot="dropdown">
               <el-dropdown-item>个人中心</el-dropdown-item>
               <el-dropdown-item @click.native="logOut">退出</el-dropdown-item>
            </el-dropdown-menu>
         </el-dropdown>
      </div>
   </header>
</template>

<script>
import { mapState } from 'vuex'
export default {
   name: 'CommonHeader',
   data() {
      return {
         userImg: require('../assets/images/user.jpg')
      }
   },
   methods: {
      handleMenu() {
         this.$store.commit('collapseMenu')
      },
      logOut() {
         this.$store.commit('clearToken')
         this.$store.commit('clearMenu')
         this.$router.push('/login')
      }
   },
   computed: {
      ...mapState({
         tags: (state) => state.tab.tabsList
      })
   }
}
</script>

<style lang="less" scoped>
header {
   // background-color: #4fa9fd;
   display: flex;
   // width: 100%;
   height: 100%;
   justify-content: space-between;
   align-items: center;
}

// 左侧样式
.l-content {
   display: flex;
   align-items: center;

   .el-button {
      margin-right: 20px;
   }
}

// 顶部右侧样式
.r-content {
   .user {
      width: 40px;
      height: 40px;
      border-radius: 50%;
   }

   .user:hover {
      cursor: pointer;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
   }
}

// 面包屑样式

::v-deep .el-breadcrumb__inner.is-link:hover {
   cursor: pointer;
   color: skyblue;
}

// ::v-deep .el-breadcrumb__inner.is-link {
//   color: red;
// }
// ::v-deep .el-breadcrumb__item .el-breadcrumb__inner {
//   color: #fff;
// }

::v-deep .el-breadcrumb__inner.is-link {
   color: gray;
}

::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
   color: #fff;
}
</style>